<template>
  <!-- tab栏 -->
  <div class="tab">
    <!-- 顶部默认 -->
    <ul>
      <li
        v-for="(item, index) in tabData.default"
        :key="index"
        :class="activeClass(index)"
        @click="goToTabItem(index)"
      >
        {{ item }}
      </li>
    </ul>
    <!-- 分隔符 -->
    <div class="tab-title">我的音乐</div>
    <ul>
      <li
        v-for="(value, key, index1) in tabData.myMusic[0]"
        :key="index1"
        :class="activeClass(index1 + tabData.default.length)"
        @click="goToTabItem(index1 + tabData.default.length)"
      >
        <i :class="key"></i>
        <span>{{ value }}</span>
      </li>
    </ul>
    <!-- 分隔符 -->
    <div v-if="cookie.length > 5">
      <div class="tab-title tab-create">
        创建的歌单
        <van-icon name="plus" class="tab-add" title="创建歌单" />
      </div>
      <ul>
        <template v-for="(item, index2) in mySongList.playlist" :key="index2">
          <li
            v-if="item.subscribed == false"
            :class="activeClass(tabData.default.length + 5 + index2)"
            @click="goToTabItem(tabData.default.length + 5 + index2)"
          >
            <van-icon name="like-o" v-if="index2 == 0" />
            <van-icon name="award-o" v-else />
            <span>{{ item.name }}</span>
          </li>
        </template>
      </ul>
      <!-- 分隔符 -->
      <div class="tab-title">收藏的歌单</div>
      <ul class="tab-collect">
        <template v-for="(item, index3) in mySongList.playlist" :key="index3">
          <li
            v-if="item.subscribed == true"
            :class="activeClass(tabData.default.length + 5 + index3)"
            @click="goToTabItem(tabData.default.length + 5 + index3)"
          >
            <van-icon name="award-o" />
            <span>{{ item.name }}</span>
          </li>
        </template>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, watch ,computed} from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import axios from "axios";

const router = useRouter();
const route = useRoute();
const store = useStore();

const cookie = computed(()=>{
  return store.state.m_user.cookie
})

// 初始化数据
const tabData = reactive({
  default: ["发现音乐", "博客", "视频", "关注", "直播", "私人FM"],
  myMusic: [
    {
      "iconfont icon-xiazai": "本地与下载",
      "iconfont icon-zuijinbofang": "最近播放",
      "iconfont icon-yun-yunpan-yuncunchu": "我的音乐云盘",
      "iconfont icon-hot-spot-signal": "我的播客",
      "iconfont icon-favorite": "我的收藏",
    },
  ],
});

// 选中下标
const countIndex = ref(0);

// 选中类名
const activeClass = (index) => {
  if (index >= 6 && index <= 10) {
    return index == countIndex.value
      ? "tab-item tab-item-active-backgroundcolor"
      : "tab-item";
  }
  if (index >= 11) {
    return index == countIndex.value
      ? "tab-item tab-item-active-backgroundcolor"
      : "tab-item small-font";
  }
  return index == countIndex.value ? "tab-item tab-item-active" : "tab-item";
};

// 跳转页面 name
const skipNames = reactive([
  "findMusic", // 发现音乐
  "podcast", // 博客
  "video", // 视频
  "attention", // 关注
  "liveStreaming", // 直播
  "privateFM", // 私人FM
]);

// 点击tab栏事件
const goToTabItem = (index) => {
  countIndex.value = index;
  console.log(index);
  if (index <= 10) {
    return router.push({
      name: skipNames[index],
    });
  }
  store.commit(
    "m_song/updateSongListId",
    mySongList.value.playlist[index - 11].id
  );
  return router.push({
    // 切换自己的歌单时
    name: "refresh",
    params: {
      urlName: "songListInfo",
    },
  });
};

// 我的歌单的数据
const mySongList = ref("");
// 获取用户详情、歌单
const getUserSongList = async () => {
  await axios
    .get(
      `http://localhost:3000/user/playlist?uid=${store.state.m_user.userInfo.userId}&cookie=${store.state.m_user.cookie}`
    )
    .then((res) => {
      store.commit("m_user/updateSongList", res.data);
      mySongList.value = res.data;
    })
    .catch((err) => {
      console.log(err);
    });
};
getUserSongList();

// 监听路由改变
watch(
  () => route.path,
  (to, from) => {
    // 暂时处于搜索页面就更新类名下标
    if (to == "/search-info-list/searchSingle") {
      countIndex.value = 99;
    }
  }
);
</script>
<style lang="less">
@import url(../../assets/fonts/tab/iconfont.css);
body {
  height: 100%;

  .tab {
    z-index: 997;
    position: fixed;
    top: 63px;
    left: 0;
    width: 200px;
    height: 100%;
    border-right: 1px solid rgba(0, 0, 0, 0.13);
    background-color: white;

    overflow: scroll;
    //设置滚动条整体样式
    &::-webkit-scrollbar {
      width: 3px;
    }
    // 当鼠标经过时显示滚动条
    &:hover {
      &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.103);
        background-color: #e0e0e0 !important;
      }
    }
    // 滚动条颜色
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
      background-color: #e0e0e000 !important;
    }
    // 未滚动的颜色
    &::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.014);
      border-radius: 0;
      // background: rgba(255, 0, 0, 0.89);
    }

    .tab-create {
      position: relative;

      .tab-add {
        position: absolute;
        right: 10px;
        top: 6px;
        color: #000000c9;

        &:hover {
          cursor: pointer;
        }
      }
    }
    .tab-item {
      height: 40px;
      font-size: 15px;
      line-height: 40px;
      padding-left: 10px;
      margin: 0 6px;
      transition: all 0.2s;
      /* 文字省略 */
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;

      span {
        margin-left: 6px;
      }

      &:hover {
        cursor: pointer;
        background-color: #f6f6f7;
      }
    }
    .small-font {
      font-size: 14px;
    }
    .tab-title {
      font-size: 14px;
      color: #0000004d;
      margin: 6px 0 2px 16px;

      &:hover {
        cursor: default;
      }
    }

    .tab-item-active {
      background-color: #f6f6f7;
      font-weight: 900;
      color: #000000cf;
      font-size: 18px;
    }

    .tab-item-active-backgroundcolor {
      background-color: #f1f1f1;
    }

    .tab-collect {
      li:last-child {
        margin-bottom: 128px;
      }
    }
  }
}
</style>